<template>
    <div class="des">
        <div class="briefDesc">
            <h2 class="name">歌手简介</h2>
            <p>{{desc.briefDesc}} </p>
        </div>
        <div class="introduction">
            <div class="desc">
                <h2 class="name">代表作品</h2>
                <p v-html="desc.mainWorks"></p>
            </div>
            <div class="desc">
                <h2 class="name">主要成就</h2>
                <p v-html="desc.mainAchievements"></p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "des",
        data() {
            return {
                desc:{},
            }
        },
        computed:{
            id(){
                return this.$route.query.id;
            }
        },
        methods:{
            // 获取歌手um描述
            async getArtistDesc(){
                let obj = await this.$API.reqArtistDesc(this.id);
                this.desc.briefDesc = obj.result.artistInfo.basicInfo;
                this.desc.mainWorks = obj.result.artistInfo.mainWorks;
                this.desc.mainAchievements = obj.result.artistInfo.mainAchievements;
                this.$forceUpdate();
            }
        },
        mounted(){
            this.getArtistDesc();
        }
    }
</script>

<style lang="less" scoped>
    .des{
        width: 100%;
        .name{
            margin: 28px 0 8px 0;
            color: #333;
            font-size: 14px;
            padding-left: 10px;
            border-left:3px solid #c10d0c;
        }
        p{
            line-height: 25px;
            color: #666;
            // text-indent: 2em;
        }
        .briefDesc{
            margin-bottom: 10px;

        }
        .introduction{
            width: 100%;
            .desc{
                margin-bottom: 30px;
            }
        }
    }
</style>